<template>
    <!--nav-->
    <div>
        <div class="bg">
            <img :src="detail.al ? detail.al.picUrl : detail.picUrl" alt="">
        </div>
        <div class="nav">

            <div @click="updataShow">
                <van-icon size='20' name="arrow-down" />
            </div>
            <div>
                <div>{{ detail.name }}</div>
                <div>歌手</div>
            </div>
            <div></div>

        </div>
        <!--头像-->
        <div class="detailImg">
            <img :style="`animation-play-state:${btn ? 'running' : 'paused'}`"
                :src="detail.al ? detail.al.picUrl : detail.picUrl" alt="" />
        </div>
        <!--歌词-->
        <div class="lry">
            <div class="scroll" :style="`top:-${hg}px`">
                <div class="aa" :class="{ active: (current * 1000 >= item.time && current * 1000 < item.next) }"
                    v-for="(item, index) in lyric">
                    {{ item.lrc }}
                </div>

            </div>
        </div>
        <!--控件-->
        <div class="btn">
            <div><van-icon size='30' name="arrow-left" /></div>
            <div @click="play">
                <div v-if="!btn"><van-icon size='30' name="play-circle-o" /></div>
                <div v-if="btn"><van-icon size='30' name="pause-circle-o" /></div>
            </div>
            <div><van-icon name="arrow" size='30' /></div>
        </div>
    </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';

export default {
    props: ['detail', 'play', 'btn'],
    data() {
        return {
            hg: 0
        }
    },
    watch: {
        //监听歌曲播放时间
        current() {
            let activelyr = document.getElementsByClassName('active')[0]
            console.log(activelyr);
            if (!activelyr) {
                return;
            }
            if (activelyr.offsetTop > 100) {
                this.hg = activelyr.offsetTop - 150
            } else {
                this.hg = 0
            }

        }
    },

    computed: {
        ...mapState(['lyricList', 'current']),
        //处理歌词
        lyric() {
            //arr存放处理好的歌词数据
            let arr
            if (this.lyricList.lyric) {
                arr = this.lyricList.lyric.split(/\n/).map((item) => {
                    console.log(item)
                    //获取分钟秒钟毫秒值
                    let min = item.slice(1, 3)
                    let sec = item.slice(4, 6)
                    let mill = item.slice(7, 10)
                    //截取歌词
                    let lrc = item.slice(11, item.length)
                    //歌词高亮时间
                    let time = parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill)
                    //判断是否截取到】
                    if (isNaN(Number(mill))) {
                        mill = item.slice(7, 9)
                        lrc = item.slice(10, item.length)
                        time = parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill)
                    }
                    return { min, sec, mill, time, lrc }

                });
                arr.forEach((item, i) => {
                    if (i == arr.length - 1 || isNaN(arr[i + 1].time)) {
                        item.next = 10000000000000
                    } else {//下一句开始的时间作为上一句的结束时间
                        item.next = arr[i + 1].time

                    }


                })

            }
            console.log("我们需要的数据", arr);
            return arr
        }
    },
    methods: {
        ...mapMutations(['updataShow'])
    }

}
</script>

<style lang="less" scoped>
.active {
    color: rgb(202, 45, 118);
    font-size: 18px;
    transition: all .3s linear;
}

@keyframes demo1 {
    0% {
        transform: rotate(0deg);
    }



    100% {
        transform: rotate(360deg);
    }
}

.btn {
    animation-play-state: running;
    animation-play-state: paused;
    display: flex;
    align-items: center;
    height: 50px;
   
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    justify-content: space-evenly;
}

.lry {
    height: 300px;

    margin-top: 15px;

    overflow: hidden;
    position: relative;

    .scroll {
        position: absolute;
        text-align: center;
        color: #fff;
        width: 90%;
        margin-left: 5%;
        top: 0;
        transform: top .3s linear;

        .aa {
            line-height: 30px;

        }

    }
}

.detailImg {
    width: 200px;
    height: 200px;
    margin-top: 20px;
    margin-left: calc(50% - 100px);

    img {
        width: 100%;
        border-radius: 50%;
        animation: demo1 30s linear infinite;
    }
}

.bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    filter: blur(50px);

    img {
        width: 100%;
        height: 100%;
    }

    ;
}

.nav {
    text-align: center;
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 10px;
    justify-content: space-between;
    color: #fff;

}
</style>